<template>
  <Content title="点检完成">
    <view class="maintain-completed-box" style="padding-bottom: 160rpx">
      <view class="content content-bottom">
        <u-form
          labelPosition="left"
          :model="model"
          labelWidth="120"
          labelAlign="left"
          :rules="rules"
          ref="uForm"
        >
          <u-form-item
            :borderBottom="true"
            labelPosition="top"
            label="点检计划"
            prop="remark"
          >
            <view class="materia-list">
              <view
                class="materia-box"
                v-for="(item, index) in model.mmoldSpotCheckTaskSpotCheckRef"
              >
                <view class="box-l">
                  <view class="box-item">
                    <text class="label">点检项目:</text>
                    <text class="box-input">{{ item.checkName }}</text>
                  </view>
                  <view class="box-item">
                    <text class="label">描述:</text>
                    <text class="box-input">{{ item.checkName }}</text>
                  </view>
                  <view class="box-item">
                    <text class="label">点检结果:</text>

                    <u-radio-group
                      class="box-input"
                      v-model="
                        model.mmoldSpotCheckTaskSpotCheckRef[index].checkResult
                      "
                      placement="row"
                    >
                      <u-radio
                        label="完成"
                        name="1"
                        style="margin-right: 20px"
                      ></u-radio>
                      <u-radio label="异常" name="0"></u-radio>
                    </u-radio-group>
                  </view>

                  <view class="box-item">
                    <text class="label">录入内容:</text>
                    <u-textarea
                      class="box-input"
                      v-model="
                        model.mmoldSpotCheckTaskSpotCheckRef[index]
                          .checkResultDesc
                      "
                      placeholder="请填写录入内容"
                    ></u-textarea>
                  </view>

                  <u-form-item
                    :borderBottom="true"
                    labelPosition="top"
                    label="使用物料"
                    prop="remark"
                  >
                    <view class="materia-list">
                      <view
                        class="materia-box"
                        v-for="(item, materIndex) in model
                          .mmoldSpotCheckTaskSpotCheckRef[index]
                          .mmoldSpotCheckTaskMaterialRefs"
                      >
                        <view class="box-l">
                          <view class="box-item">
                            <text class="label">品名:</text>
                            
                            <uni-data-select
                              class="box-input"
                              v-model="item.materialName"
                              :localdata="materielNoList"
                              showInput
                              @blur="materielNoChangeAdd"
                              @inputChange="materielNoChangeAdd"
                              placeholder="请选择"
                              @change="
                                materieChange(
                                  item.materialName,
                                  index,
                                  materIndex
                                )
                              "
                            ></uni-data-select>
                          </view>
                          <view class="box-item">
                            <text class="label">物料号:</text>
                            <u-input
                              class="box-input"
                              label
                              disabled
                              v-model="item.materialCode"
                              placeholder="请填写物料号"
                              clearable
                            ></u-input>
                          </view>
                          <view class="box-item">
                            <text class="label">规格:</text>
                            <u-input
                              class="box-input"
                              label
                              disabled
                              v-model="item.materialModel"
                              placeholder="请填写规格"
                              clearable
                            ></u-input>
                          </view>
                          <view class="box-item">
                            <text class="label">数量:</text>
                            <u-input
                              class="box-input"
                              label
                              v-model="item.materialNum"
                              placeholder="请填写数量"
                              clearable
                            ></u-input>
                          </view>
                        </view>
                        <view class="box-r">
                          <text
                            v-if="model.status == 1"
                            class="del"
                            @click="delMaterial(index, materIndex)"
                            >删除</text
                          >
                        </view>
                      </view>
                      <view
                        v-if="model.status == 1"
                        class="btn"
                        @click="addMaterial(index)"
                        >+添加
                      </view>
                    </view>
                  </u-form-item>
                  <u-form-item
                    :borderBottom="true"
                    labelPosition="top"
                    label="使用工具"
                    prop="remark"
                  >
                    <view class="materia-list">
                      <view
                        class="materia-box"
                        v-for="(item, deviceIndex) in model
                          .mmoldSpotCheckTaskSpotCheckRef[index]
                          .mmoldSpotCheckTaskDevRefs"
                      >
                        <view class="box-l">
                          <view class="box-item">
                            <text class="label">工具名称:</text>
                            <uni-data-select
                              class="box-input"
                              v-model="item.deviceName"
                              :localdata="deviceNoList"
                              showInput
                              @blur="deviceNoChangeAdd"
                              @inputChange="deviceNoChangeAdd"
                              placeholder="请选择"
                              @change="
                                deviceChange(item.deviceName, index, deviceIndex)
                              "
                            ></uni-data-select>
                          </view>
                          <view class="box-item">
                            <text class="label">工具物料号:</text>
                            <u-input
                              class="box-input"
                              label
                              disabled
                              v-model="item.deviceMId"
                              placeholder="请填写工具物料号"
                              clearable
                            ></u-input>
                          </view>
                          <view class="box-item">
                            <text class="label">保管方式:</text>
                            <u-input
                              class="box-input"
                              label
                              v-model="item.keepWay"
                              placeholder="请填写保管方式"
                              clearable
                            ></u-input>
                          </view>
                          <view class="box-item">
                            <text class="label">数量:</text>
                            <u-input
                              class="box-input"
                              label
                              v-model="item.deviceNum"
                              placeholder="请填写数量"
                              clearable
                            ></u-input>
                          </view>
                        </view>
                        <view class="box-r">
                          <text
                            v-if="model.status == 1"
                            class="del"
                            @click="delDevice(index, deviceIndex)"
                            >删除</text
                          >
                        </view>
                      </view>
                      <view
                        v-if="model.status == 1"
                        class="btn"
                        @click="addDevice(index)"
                        >+添加
                      </view>
                    </view>
                  </u-form-item>
                  <view class="box-item">
                    <text class="label" style="width: 90px">上传附件:</text>
                    <MyUpload
                      v-model="
                        model.mmoldSpotCheckTaskSpotCheckRef[index].taskFile
                      "
                      multiple
                      :maxCount="5"
                    ></MyUpload>
                  </view>
                </view>
                <!-- <view class="box-r">
                  <text class="del" @click="delMaintain(index)">删除</text>
                </view> -->
              </view>
              <!-- <view class="btn" @click="addMaintain">+添加</view> -->
            </view>
          </u-form-item>

          <view class="btn-v">
            <view class="but-box">
              <u-button class="btn" @click="close" text="取消"></u-button>
              <u-button
                class="btn"
                type="primary"
                @click="submit"
                text="点检完成"
              ></u-button>
            </view>
          </view>
        </u-form>
      </view>
    </view>
  </Content>
</template>

<script>
import Content from "@/components/content/index.vue";
import { getPageData, getUserInfo } from "@/store/user";
import fetch from "@/utils/fetch";
import MyUpload from "@/components/myUpload";
export default {
  options: {
    multipleSlots: true,
  },
  components: {
    Content,
    MyUpload,
  },
  data() {
    return {
	  deviceNoList:[],
	  materielNoList:[],
	  fileList:[],
      userInfo: {},
      //参观调研、维保检验、活动参会、备航参航text:'',value:''
      model: {
        id: "",
        mmoldSpotCheckTaskSpotCheckRef: [],
      },
      rules: {
        name: {
          type: "string",
          required: true,
          message: "请填写姓名",
        },
      },
    };
  },
  onReady: function () {
    this.userInfo = getUserInfo();
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    if (this.$refs.uForm) this.$refs.uForm.setRules(this.rules);
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.model.id = option.id;
    this.getDetailInfo();
  },
  methods: {
    close() {
      uni.navigateBack({
        delta: 1, //返回上一页
      });
    },
    //获取点检详情数据
    getDetailInfo() {
      this.$loading.open();
      fetch("post", "/dms/moldSpotCheckTask/getTaskDetailById", null, {
        id: this.model.id,
      }).then((res) => {
        this.model.mmoldSpotCheckTaskSpotCheckRef =
          res.data.mmoldSpotCheckTaskSpotCheckRef.map(item=>{
			  return {
				  ...item,
				  taskFile:item.taskFile || []
			  }
		  });
		this.model.status = res.data.status;
        this.$loading.close();
      });
    },
	delMaterial(index, materIndex) {
	  this.model.mmoldSpotCheckTaskSpotCheckRef[
	    index
	  ].mmoldSpotCheckTaskMaterialRefs.splice(materIndex, 1);
	},
    addMaintain() {
      this.model.mmoldSpotCheckTaskSpotCheckRef.push({});
    },
	materielNoChangeAdd(val, value) {
	  if (
	    val &&
	    this.materielNoList.find(
	      (item) => item.materialCode + "-" + item.materialName === val
	    )
	  ) {
	    return;
	  }
	  const params = {
	    materialName: val,
	    pageNum: 1,
	    pageSize: 9999,
	  };
	  this.$loading.open();
	  fetch("post", "/dms/material/page", params).then((res) => {
	    if (res.code === 200) {
	      if (res.data) {
	        this.materielNoList = res.data.records.map((item) => {
	          return {
	            ...item,
	            text: item.materialCode + "-" +item.materialName,
	            value: item.materialName,
	          };
	        });
	      }
	      if (value) {
	        this.model.bomId = Number(value);
	      }
	    }
	  });
	},
	materieChange(val, index, materIndex) {
	  console.log("val, index", val, index, materIndex);
	  if (!val) {
	    this.$set(val, index, {
	      materialCode: "",
	      materialName: "",
	      materialModel: "",
	      materialNum: 1,
	    });
	    return;
	  }
	  console.log("obj", this.materielNoList, obj);
	  const obj = this.materielNoList.find((item) => item.materialName == val);
	  if (obj) {
	    this.$set(
	      this.model.mmoldSpotCheckTaskSpotCheckRef[index]
	        .mmoldSpotCheckTaskMaterialRefs,
	      materIndex,
	      {
	        materialId: obj.id,
	        materialCode: obj.materialCode,
	        materialName: obj.materialName,
	        materialModel: obj.materialModel,
	        materialNum:
	          this.model.mmoldSpotCheckTaskSpotCheckRef[index]
	            .mmoldSpotCheckTaskMaterialRefs[materIndex].materialNum,
	      }
	    );
	  }
	},
	delDevice(index, deviceIndex) {
	  this.model.mmoldSpotCheckTaskSpotCheckRef[
	    index
	  ].mmoldSpotCheckTaskDevRefs.splice(deviceIndex, 1);
	},
	addDevice(index) {
	  this.model.mmoldSpotCheckTaskSpotCheckRef[
	    index
	  ].mmoldSpotCheckTaskDevRefs.push({
	    deviceMId: "",
	    deviceName: "",
	    keepWay: "",
	    deviceNum: 1,
	  });
	},
	addMaterial(index) {
	  this.model.mmoldSpotCheckTaskSpotCheckRef[
	    index
	  ].mmoldSpotCheckTaskMaterialRefs.push({
	    materialCode: "",
	    materialName: "",
	    materialModel: "",
	    materialNum: 1,
	  });
	},
	deviceNoChangeAdd(val, value) {
	  console.log(val, "deviceNoChangeAdd");
	  if (val && this.deviceNoList.find((item) => item.materialName == val)) {
	    return;
	  }
	 const params = {
	   materialName: val,
	   pageNum: 1,
	   pageSize: 9999,
	 };
	  this.$loading.open();
	  fetch("post", "/dms/material/page", params).then((res) => {
	    if (res.code === 200) {
	      if (res.data) {
	        this.deviceNoList = res.data.records.map((item) => {
	          return {
	            ...item,
	            text: item.materialName,
	            value: item.materialName,
	          };
	        });
	      }
	    }
	  });
	},
	deviceChange(val, index, deviceIndex) {
	  console.log("val, index", val, index, deviceIndex);
	  if (!val) {
	    this.$set(val, index, {
	      deviceMId: "",
	      deviceName: "",
	      keepWay: "",
	      deviceNum: 1,
		  deviceId:'',
	    });
	    return;
	  }
	  const obj = this.deviceNoList.find((item) => item.materialName == val);
	  console.log("obj", this.deviceNoList, obj);
	  if (obj) {
	    const thisValue =
	      this.model.mmoldSpotCheckTaskSpotCheckRef[index]
	        .mmoldSpotCheckTaskDevRefs[deviceIndex];
	    this.$set(
	      this.model.mmoldSpotCheckTaskSpotCheckRef[index]
	        .mmoldSpotCheckTaskDevRefs,
	      deviceIndex,
	      {
			deviceId:obj.id,
	        deviceMId: obj.materialCode,
	        deviceName: obj.materialName,
	        keepWay: thisValue.keepWay,
	        deviceNum: thisValue.deviceNum,
	      }
	    );
	  }
	},
    submit() {
      this.$refs.uForm.validate().then((valid) => {
        if (valid) {
          fetch(
            "post",
            "/dms/moldSpotCheckTask/updateTaskResultById",
            this.model
          ).then((data) => {
            uni.$emit("openToast", {
              type: "success",
              title: "申请成功",
              complete() {
                setTimeout(() => {
                   uni.navigateBack({
                   delta: 1,
                });
                }, 1000);
              },
            });
          });
        } else {
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.maintain-completed-box {
  padding: 20rpx;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;

  /deep/ .u-form-item__body__left__content__label {
    margin-left: 20rpx;
  }

  // /deep/ .uni-select {
  //     border: none;
  //     border-bottom: none;
  //     line-height: 26px;
  //     height: 24px !important;
  //     padding-left: 0;
  // }

  /deep/ .uni-select__input-placeholder {
    color: #cbc9cc !important;
    font-size: 15px !important;
  }
}

.content {
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 12rpx 18rpx -6rpx rgba(0, 0, 0, 0.2);
}

.content-bottom {
  flex: 1;
}

.data-select {
  /deep/ .uni-select__selector {
    top: -155px;

    .uni-popper__arrow {
      display: none;
    }
  }
}

.box-item {
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;

  .label {
    width: 60px;
  }

  .box-input {
    margin: 0 20rpx;
  }
}

.del {
  color: #a30014;
}

.materia-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 20rpx;

  .box-l {
    flex: 1;
  }

  .box-r {
  }
}

.user-box,
.materia-list {
  width: 100%;
  padding: 20rpx 40rpx;

  .btn {
    width: 100%;
    text-align: center;
    color: #3c9cff;
  }
}
</style>
